<template>
  <div id="window">
    <h1 class="con-right-title">
      直播间橱窗管理
    </h1>
    <!-- 顶部搜索 -->
    <topSearch @toSearch="toSearch"></topSearch>
    <!-- 操作按钮 -->
    <div class="table-conBtn">
      <el-button
        type="warning"
        icon="el-icon-plus"
        @click="addEditConfig('add')"
      >
        新增配置
      </el-button>
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <!-- 表格部分 -->
    <el-table v-loading="loading" :data="tableData">
      <el-table-column label="序号" type="index" width="180" align="center">
      </el-table-column>
      <el-table-column
        label="直播间频道号"
        width="180"
        align="center"
        :formatter="formatterChannelId"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column
        label="配置端口"
        min-width="180"
        align="center"
        :formatter="formatterTerminals"
      >
      </el-table-column>
      <el-table-column label="状态" min-width="180" align="center">
        <template slot-scope="scope">
          <el-switch
            :value="scope.row.status === 'OPEN'"
            active-color="#1dc8a4"
            active-text="开启"
            inactive-text="关闭"
            @change="changeStatus(scope.row.id)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
        label="操作人"
        width="180"
        prop="updatedByName"
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="操作时间"
        min-width="180"
        prop="updatedTime"
        align="center"
      >
      </el-table-column>
      <el-table-column label="操作" min-width="180" align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            :disabled="scope.row.status === 'OPEN'"
            :style="{ color: scope.row.status === 'OPEN' ? '#8B8B7A' : '' }"
            @click="addEditConfig('edit', scope.row.id)"
          >
            编辑配置
          </el-button>
          <el-button type="text" @click="toCommodity(scope.row.id)">
            编辑商品
          </el-button>
          <el-button
            type="text"
            :disabled="scope.row.status === 'OPEN'"
            :style="{ color: scope.row.status === 'OPEN' ? '#8B8B7A' : '' }"
            @click="deleteConfig(scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
    <!-- 新增配置dialog -->
    <dialogAdd
      v-if="dialogData.isShow"
      :dialog-data="dialogData"
      @refresh="refresh"
    ></dialogAdd>
  </div>
</template>

<script>
import topSearch from '@component/system/window/topSearch'
import dialogAdd from '@component/system/window/dialogAdd'
import { getSearchList, editStatus, deleteWindow } from '@/api/system/window'
export default {
  data() {
    return {
      loading: false,
      tableData: [],
      total: 0,
      searchParams: {
        pageNum: 1,
        pageSize: 10
      },
      dialogData: {
        isShow: false
      }
    }
  },
  components: {
    topSearch,
    dialogAdd
  },
  mounted() {
    this.searchList()
  },
  methods: {
    // 列表
    searchList() {
      this.loading = true
      getSearchList(
        this.searchParams,
        (res) => {
          this.loading = false
          this.total = res.total
          this.tableData = res.rows
        },
        (err) => {
          this.loading = false
          this.$message.warning(err.message)
        }
      )
    },
    //查询
    toSearch(val) {
      this.searchParams.pageNum = 1
      Object.assign(this.searchParams, val)
      this.searchList()
    },
    //新增配置
    addEditConfig(type, id) {
      if (type === 'add') {
        this.dialogData = { isShow: true, type }
      } else {
        this.dialogData = { isShow: true, type, id }
      }
    },
    //修改状态
    changeStatus(id) {
      editStatus({ id }, () => {
        this.searchList()
        this.$message.success('状态修改成功')
      })
    },
    //删除配置
    deleteConfig(id) {
      this.$confirm(`确认要删除此条配置吗?`, '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteWindow({ id }, () => {
            this.$message.success('删除成功')
            this.searchList()
          })
        })
        .catch(() => {
          this.$message.info('取消删除')
        })
    },
    //编辑管理
    toCommodity(id) {
      this.$router.push({
        name: 'wh:system:window:commodity',
        query: { id }
      })
    },
    //刷新列表
    refresh() {
      this.searchParams.pageNum = 1
      this.searchList()
    },
    //格式化
    formatterChannelId(row) {
      return row.channelIds.toString()
    },
    formatterTerminals(row) {
      return row.terminals.toString()
    }
  }
}
</script>

<style lang="less" scoped>
:deep(.el-switch__label.is-active) {
  color: #1dc8a4;
}
</style>
